Jump to content

Верстка интернет-магазина одежды


Libiros
 Share

Recommended Posts

Здравствуйте!

Прошу оценить вёрстку шаблона для интернет-магазина одежды, а именно мне нужна критика, указывание ошибок и объяснение их.

В общем, тыкайте носом, бейте, пинайте, но с объяснением что не так и почему, чтобы я не допускал больше таких ошибок и понимал их. А также как можно исправить мои ошибки.

Также приму критику по дизайну (всегда испытываю проблемы с цветовыми гаммами и структурой сайта), потому как мне она кажется не достаточно хорошей. Приму любые советы.

Благодарю за внимание.

http://jsfiddle.net/Libiros/dWcJY/13/

http://jsfiddle.net/...mbedded/result/

Link to comment
Share on other sites

Извините конечно, но по мне дак ужасно.

Я про дизайн. Если не умеете сами, "делать красиво", воспользуйтесь любым css-фреймворком, мне кажется это будет оптимально.

+ посмотрите на любые сайты магазинов. Так как вы уже никто не делает. Больше похоже на работу, первый раз севшего за код.

Ко коду особо нечего оценивать. Кругом id, таблицы... Верстать нужно не для того чтобы просто показать, верстать нужно для дальнейшего продакшена. Если программист возьмет вашу верстку, он намучается. Товар это же единый элемент? Зачем вы все, что касается 1го товара раскидали по разным строкам таблицы. Пусть он будет в ячейке таблицы, но как единое целое, т.е. лучше бы внутри ячейки еще одну таблицу сделали.

Link to comment
Share on other sites

Если программист возьмет вашу верстку, он намучается.

Почему? Что именно не так? Я же должен учиться :)

Пусть он будет в ячейке таблицы, но как единое целое, т.е. лучше бы внутри ячейки еще одну таблицу сделали.

Не слишком ли много таблиц (и тегов) для такой мизерной информации? Может, можно решить как-то иначе? Что, Если я сделаю с помощью <p> (display:table-cell) ?

А насчет дизайна согласен, но пока первостепенной целью является научиться грамотно верстать, потому как я могу сверстать любой макет, но качество верстки будет ужасно.

Link to comment
Share on other sites

Почему? Что именно не так? Я же должен учиться :)

1. Чем меньше семейств шрифтов используется на сайте - тем лучше, особая неудача - Джорджия.

2. Тени как правило используют чтобы подчеркнуть объем, в Вашем случае - "о, смотрите, я умею делать тени". При этом баннер почему-то сиротливо стыдится пришлепаным к основной подложке.

3. Есть такая штука - сочетание цветов - погуглите.

4. Есть еще одна штука - золотое сечение, погуглите.

5. Есть специфика поведенческих сценариев пользователя на странице - погуглите.

6. Кроме всего прочего - есть особенности именно для магазинов, и именно для одежды, походите по самым успешным - для вдохновения.

А еще лучше - начните просто с рисования прекрасного. Дерево там, яблочко. Для развития художественного вкуса. Если станете умиляться своему карандашному наброску, если это вольет в Вашу кровь адреналин - значит Ваше, иначе - не Ваше.

Но в любом случае - это творение однозначно проигрывает по всем параметрам одному из 6-ти стандартных битриксовских бесплатных шаблонов "из коробки". Понимаете о чем я?

Link to comment
Share on other sites

Если программист возьмет вашу верстку, он намучается.

Почему? Что именно не так? Я же должен учиться :)

Пусть он будет в ячейке таблицы, но как единое целое, т.е. лучше бы внутри ячейки еще одну таблицу сделали.

Не слишком ли много таблиц (и тегов) для такой мизерной информации? Может, можно решить как-то иначе? Что, Если я сделаю с помощью <p> (display:table-cell) ?

А насчет дизайна согласен, но пока первостепенной целью является научиться грамотно верстать, потому как я могу сверстать любой макет, но качество верстки будет ужасно.

Откройте любой интернет магазин. Посмотрите на его код.

Товары можно сверстать как нибудь так http://twitter.github.com/bootstrap/components.html#thumbnails

Программист может конечно выдрать из разных ячеек таблицы слова, нужные для одного товара, но ведь куда удобнее будет, если товар будет лежать в одной, своей ячейке, а уж внутри этой ячейки можно и остальное вписать. Плохо объяснил, но может поймете.

Да и мне кажется я правильно говорю\ругаю за это.

Вот только не помню, встречал ли я это в каких то книгах по верстке, но может быть.

Link to comment
Share on other sites

1. Чем меньше семейств шрифтов используется на сайте - тем лучше, особая неудача - Джорджия.

Поменял с верданы на джорджию, прочитав статью на вебстандартсе.

4. Есть еще одна штука - золотое сечение, погуглите.

То есть мне нужно использовать 33% высоты для шапки и остальное для контента? А также 33% для левого меню?

5. Есть специфика поведенческих сценариев пользователя на странице - погуглите.

То есть мой сайт не адаптивный и нужно сделать его легче?

Программист может конечно выдрать из разных ячеек таблицы слова, нужные для одного товара, но ведь куда удобнее будет, если товар будет лежать в одной, своей ячейке, а уж внутри этой ячейки можно и остальное вписать. Плохо объяснил, но может поймете.

Да, я понял, спасибо!

Что еще плохого в плане самой верстки?

Edited by Libiros
Link to comment
Share on other sites

1. Цифры джорджии очень специфичны, все вокруг них должно быть четко продумано.

4. Не догуглили. Например, соотношения сторон прямоугольников.

5. Зайдите туда как пользователь, попросите сделать это своих знакомых, просто понаблюдайте, как долго он будет мышкой водить, будет ли ему комфортно.

По верстке - если раньше были какие-то мейнстримные решения и все прочие считались некашерными - сейчас все уложнилось, но, видимо, надо просто держаться здравого смысла.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy